import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import './index.scss'

/**
 * 现在用的自定义 tabbar 在切换时有点闪烁
 * 以后如果需要解决该问题时，就能使用这个组建
 */
export default class Index extends Component {

  state = {
    list: [
      {
        text: '首页',
        pagePath: "/pages/index/index",
        iconPath: "../image/icon_component.png",
        selectedIconPath: "../image/icon_component_HL.png",
        tagType: 'text',
        selectedColor: 'red'
      },
      {
        text: '发布',
        pagePath: "/pages/user/index",
        iconPath: "icon-fabu",
        selectedIconPath: "",
        tagType: 'font',
        selectedColor: 'red'
      },
      {
        text: '个人中心',
        pagePath: "/pages/user/index",
        iconPath: "",
        selectedIconPath: "",
        tagType: 'text',
        selectedColor: 'red'
      },
    ],
    selected: 0
  }

  checkTabBar = (index, tab) => {
    Taro.switchTab({ url: tab.pagePath })
    this.state.selected = index
    this.setState({})
  }

  render () {
    const { list, selected } = this.state
    return (
      <View className='custom-tab-bar'>
        {
          list.map((tab, index) => (
            <View key={tab.text} className='custom-tab-bar-item' onClick={this.checkTabBar.bind(this, index, tab)}>
              {
                {
                  'image': (
                    <Image
                      className='custom-tab-bar-icon'
                      src={index === selected ? tab.selectedIconPath : tab.iconPath}
                    />
                  ),
                  'text': (
                    <Text
                      className='custom-tab-bar-text'
                      style={index === selected ? { color: tab.selectedColor } : {}}
                    >{tab.text}</Text>
                  ),
                  'font': (
                    <Text
                      className={`iconfont ${tab.iconPath}`}
                      style={index === selected ? { color: tab.selectedColor } : {}}
                    />
                  )
                }[tab.tagType]
              }

            </View>
          ))
        }
      </View>
    )
  }
}
